<template>
  <div>
    <table>
      <tr>
        <td>书名</td>
        <td>价格</td>
        <td>操作</td>
      </tr>
      <tr v-for=" i in data">
        <td>{{i.name}}</td>
        <td>{{i.price}}</td>
        <td>
          <button @click="del(i.id)">删除</button>
        </td>
      </tr>
    </table>

    <br>
    <template>
              
      <el-table
         :data="data"  border >
         
        <el-table-column
           type="index"></el-table-column>
               
        <el-table-column
           prop="name"  label="书名"></el-table-column>
                
        <el-table-column
           prop="price"  label="价格"></el-table-column>
                
        <el-table-column
            label="操作">                
          <template slot-scope="scope">
            <el-button @click="del(scope.row.id)" type="primary">删除</el-button>
          </template>
                  
        </el-table-column>
                
      </el-table>

          
    </template>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        data: [],
      }
    },
    components: {},
    mounted() {
      this.getbook()
      //  this.axios({
      //      url:'http://127.0.0.1:8000/getbook/',
      //      method:"get",
      //  }).then(res=>{
      //      this.data = res.data.data
      //  })
    },
    methods: {
      getbook() {
        this.axios({
          url: 'http://127.0.0.1:8000/getbook/',
          method: "get",
        }).then(res => {
          this.data = res.data.data
        })
      },

      del(id) {
        this.axios({
          url: 'http://127.0.0.1:8000/delbook/?id=' + id,
          method: "get",
        }).then(res => {
          this.getbook()
        })
      },

    }
  }
</script>
